<template>
  <div class="admin_index">
      <div class="admin_left">
          <div class="admin_logo"><img src="/static/img/logo.png"></div>
          <div class="admin_nav">
            <router-link to="/admin_index" class="acolor"><i class="el-icon-s-home"></i>产品中心</router-link>
            <router-link to="/admin_index2" class="acolor"><i class="el-icon-s-cooperation"></i>商品中心</router-link>
            <router-link to="/admin_index3" class="acolor"><i class="el-icon-s-order"></i>订单中心</router-link>
            <router-link to="/admin_index4" class="acolor"><i class="el-icon-s-shop"></i>抓单店铺管理</router-link>
            <router-link to="/admin_index5" class="acolor"><i class="el-icon-s-custom"></i>用户中心</router-link>
          </div>
<!--          <el-collapse v-model="activeName" accordion>-->
<!--            <el-collapse-item name="1">-->
<!--              <template slot="title">-->
<!--                <i class="header-icon el-icon-s-home"></i>产品中心-->
<!--              </template>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--            </el-collapse-item>-->
<!--            <el-collapse-item>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-cooperation"></i>商品中心-->
<!--              </template>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--            </el-collapse-item>-->
<!--            <el-collapse-item>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-order"></i>订单中心-->
<!--              </template>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--            </el-collapse-item>-->
<!--            <el-collapse-item>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-shop"></i>抓单店铺管理-->
<!--              </template>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--            </el-collapse-item>-->
<!--            <el-collapse-item>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-custom"></i>用户中心-->
<!--              </template>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--              <router-link to="/admin_index" class="acolor"><div class="el-icon-edit"></div><div>订单中心</div></router-link>-->
<!--            </el-collapse-item>-->

<!--          </el-collapse>-->
      </div>
      <div class="admin_right">
        <div class="content">
          <el-form ref="form" class="flex" :model="form" label-width="150px">
            <el-form-item label="订单ID:">
              <el-input v-model="form.name"  size="medium" placeholder="多订单英文逗号隔开"></el-input>
            </el-form-item>
            <el-form-item label="外部订单编码:">
              <el-input v-model="form.name"  size="medium" placeholder="多订单英文逗号隔开"></el-input>
            </el-form-item>
            <el-form-item label="订单生产方:">
              <el-input v-model="form.name"  size="medium" placeholder="订单生产方"></el-input>
            </el-form-item>
            <el-form-item label="订单发展方:">
              <el-input v-model="form.name"  size="medium" placeholder="订单发展方"></el-input>
            </el-form-item>
            <el-form-item label="时间选择:">
              <el-date-picker  v-model="form.time" type="datetimerange" size="medium"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <div><el-button  style="margin-left: 60px; margin-bottom: 30px; position: relative; top: 2px;" icon="el-icon-search" type="danger" size="medium">搜索</el-button></div>
          </el-form>

        </div>


        <div class="content2" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="quanxuan">
            <el-button size="mini" icon="el-icon-edit" @click="piliang">批量操作</el-button>
          </el-checkbox>

          <el-checkbox-group v-model="checkedCities" @change="danxuan">
            <el-checkbox v-for="item in list" :label="item.id" :key="item.id" >
              <div class="td2">
                <div class="td">订单ID：{{item.id}}</div>
                <div class="td">产品ID：{{item.product_id}}</div>
                <div class="td">外部订单编号：{{item.source_id}}</div>
                <div class="td">订单来源：{{item.source}}</div>
                <div class="td">商品名称：{{item.my_gname}}</div>
                <div class="td">商品编码：{{item.my_gsku}}</div>
              </div>
              <div class="td3">
                <div class="td">证件姓名：{{item.id_card_name}}</div>
                <div class="td">证件号码：{{item.id_card_num}}</div>
                <div class="td">收件人：{{item.address_name}}</div>
                <div class="td">联系电话：{{item.address_mobile}}</div>
                <div class="td tdx">收货地址：{{item.address}}</div>
                <div class="td">物流公司：{{item.tracking_number}}</div>
              </div>

              <div  class="td4">

                <div class="td">订单状态：{{item.status_name}}</div>
                <div class="td">激活状态：{{item.refund_name}}</div>
                <div class="td">退款状态：{{item.refund_status}}</div>


                <div class="td">物流单号:{{item.tracking_company}}</div>
                <div class="td">订单创建时间：{{item.created_at}}</div>
                <div class="td">用户下单时间：{{item.created_at}}</div>
              </div>
              <div class="td5">
                <div class="td">ICCID：{{item.iccid}}</div>
                <div class="td">购买号码：{{item.plan_mobile}}</div>
                <div class="td">生产号码：{{item.plan_mobile_produced}}</div>
                <div class="td">发展方操作记录：{{item.address_name}}</div>
                <div class="td">生产方操作记录：{{item.address_mobile}}</div>
                <el-button size="mini" icon="el-icon-edit">修改信息</el-button>
                <el-button size="mini" icon="el-icon-edit">查看照片</el-button>
              </div>
            </el-checkbox>
          </el-checkbox-group>

        </div>

      </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "admin_index",
    data() {
      return {
        activeName: '1',
        form: {},
        time:"",
        list:"",
        checked:true,

        checkAll: false,
        checkedCities: [],
        cities: [],
        isIndeterminate: false,
        loading:true
      };
    },
    created() {
      this.getlist();
    },
    methods: {
      piliang:function(){
        console.log(this.checkedCities)
      },
      quanxuan(val) {
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
      danxuan(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },

      getlist:function () {
        var that = this
        axios.get("/api/gth/orders/trouble")
          .then(response => {
            if (response.data.msg.code == 0) {
                that.list = response.data.data.data.data;

                that.cities = []
                for(var i in that.list){
                  that.cities.push(that.list[i].id)
                }
                that.loading = false
            } else {

            }
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .admin_index{ display: flex; min-height: 900px; background: #EAEAEA;
    .admin_left{ background: #393D49; width: 250px; position: fixed; left: 0; top: 0; height: 100%;
      .admin_nav{
        .acolor{ display: flex; color: #999999; padding:15px; padding-left: 30px; font-size: 14px; font-weight: bold;
          i{ margin-right: 10px; position: relative; top: 3px;}
        }
        .router-link-active{ color: #ffffff; background: rgba(0,0,0,0.6);}
        :hover{ color: #ffffff; background: rgba(0,0,0,0.6);}
      }
      .admin_logo{ color: #ffffff; text-align: center; line-height: 100px; font-size: 20px; border-bottom: 1px #000 solid; display: flex; justify-content: center;
        img{ width: 90%; display: block; padding: 20px 0;}
      }
      /*.is-active{*/
      /*  .el-collapse-item__wrap{ background: rgba(0,0,0,0.6); border: none;}*/
      /*  .el-collapse-item__header{ color: #ffffff}*/
      /*}*/
      /*.acolor{*/
      /*  div{color: #999999}*/
      /*}*/
      /*.el-collapse{ border: none; }*/
      /*.el-collapse-item__content{ padding-bottom: 0;*/
      /*  a{ display: flex; color: #f4f4f5; padding: 15px 0; padding-left: 30px;*/
      /*    div{ margin-right: 10px; line-height: 20px}*/
      /*  }*/
      /*  :hover{ background: rgba(0,0,0,0.9);*/
      /*    div{ color: #ffffff}*/
      /*  }*/
      /*}*/
      /*.el-collapse-item__header{ background: #393D49; border: none; padding: 0 20px; color: #999; font-weight: bold;*/
      /*  i{ margin-right: 10px;}*/
      /*}*/
      /*.el-collapse-item__wrap{ border: none; background: rgba(0,0,0,0.6);}*/
    }
    .admin_right{ width: calc(100% - 250px); padding-left: 250px;
      .flex{ display: flex; padding: 20px 0; flex-wrap: wrap;}

      .content{ background: #ffffff; }
      .el-checkbox{ display: flex; background: #ffffff; border-bottom: 1px #EAEAEA solid; margin-right: 0;
        .el-checkbox__input{ width: 50px; display: flex; justify-content: center; align-items: center;}
        .el-checkbox__label{ display: flex;  margin: 15px 0; padding: 10px 0px; flex-wrap: wrap; width: 100%;
          font-size: 13px; color: #666; line-height: 25px; cursor: pointer;
          /*.th{ flex: 1; display: flex; justify-content: center; align-items: center;  padding: 15px 0;  }*/
          /*.td1{ width: 50px;}*/
          .td2{ flex: 1; overflow: hidden;}
          .td3{ flex: 1; overflow: hidden;}
          .td4{ flex: 1; overflow: hidden;}
          .td5{ flex: 1; overflow: hidden;}
          .tdx{ padding-right: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        }
      }

    }
  }
</style>
